<template>
  <view class="sign-success-container">
    <!-- 背景光效 -->
    <view class="light-effect"></view>
    
    <!-- 主体内容 -->
    <view class="content-box">
      <!-- 动画图标 -->
      <view class="icon-wrapper">
        <image 
          class="success-icon" 
          src="@/static/image/success.png"
          :style="{ transform: `translateY(${iconOffset}px)` }"
        />
        <view class="circle-effect"></view>
      </view>

      <!-- 文字提示 -->
      <view class="text-area">
        <text class="success-title">签到成功！</text>
        <text class="success-subtitle">终于等到你</text>
        <text class="continuous-text">嗨起来吧</text>
      </view>

      <!-- 装饰粒子 -->
      <view class="particles">
        <view 
          v-for="(item, index) in particles" 
          :key="index" 
          class="particle"
          :style="{
            left: item.x + '%',
            top: item.y + '%',
            background: item.color,
            animationDelay: item.delay + 's'
          }"
        ></view>
      </view>

      <!-- 操作按钮 -->
      <view class="button-group">
        <button class="action-btn home-btn" @click="goHome">查看其他活动</button>
        <button class="action-btn record-btn" @click="showRecord">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      iconOffset: 0,      // 图标浮动效果
      points: 10,         // 本次获得积分
      continuousDays: 7,  // 连续签到天数
      particles: []       // 粒子数据
    };
  },
  mounted() {
    this.startAnimation();
    this.generateParticles();
  },
  methods: {
    // 初始化动画
    startAnimation() {
      let direction = 1;
      setInterval(() => {
        if(this.iconOffset > 5) direction = -1;
        if(this.iconOffset < -5) direction = 1;
        this.iconOffset += direction * 0.5;
      }, 50);
    },

    // 生成随机粒子
    generateParticles() {
      const particles = [];
      for(let i = 0; i < 12; i++) {
        particles.push({
          x: Math.random() * 80 + 10,
          y: Math.random() * 40 + 30,
          color: `hsl(${Math.random() * 360}, 70%, 60%)`,
          delay: Math.random() * 1.5
        });
      }
      this.particles = particles;
    },

    goHome() {
      uni.navigateTo({ url: '/pages/events/eventsList/eventsList' });
    },
    showRecord() {
      // #ifdef MP-WEIXIN
      wx.exitMiniProgram()
      // #endif
	}
	}
};
</script>

<style lang="scss" scoped>
.sign-success-container {
  height: 100vh;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  position: relative;
  overflow: hidden;

  .light-effect {
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, 
      rgba(255,255,255,0.3) 0%, 
      rgba(255,255,255,0) 60%);
    animation: lightPulse 3s infinite;
  }

  .content-box {
    position: relative;
    padding-top: 120rpx;
    text-align: center;
  }

  .icon-wrapper {
    position: relative;
    margin: 0 auto 40rpx;
    width: 200rpx;
    height: 200rpx;

    .success-icon {
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease;
      z-index: 2;
      position: relative;
    }

    .circle-effect {
      position: absolute;
      width: 120%;
      height: 120%;
      top: -10%;
      left: -10%;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      animation: circlePulse 2s infinite;
    }
  }

  .text-area {
    margin-bottom: 60rpx;

    .success-title {
      display: block;
      font-size: 48rpx;
      color: #fff;
      font-weight: bold;
      margin-bottom: 20rpx;
      text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
    }

    .success-subtitle {
      display: block;
      font-size: 36rpx;
      color: #ffeb3b;
      margin-bottom: 16rpx;
    }

    .continuous-text {
      font-size: 28rpx;
      color: rgba(255,255,255,0.9);
    }
  }

  .particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .particle {
      position: absolute;
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      animation: particleFly 1.5s ease-out forwards;
    }
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 30rpx;
    padding: 0 60rpx;

    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      color: #fff;
      border: none;
      transition: all 0.3s;

      &::after {
        border: none;
      }

      &.home-btn {
        background: linear-gradient(90deg, #7ed56f, #28b485);
      }

      &.record-btn {
        background: linear-gradient(90deg, #ff9a9e, #fad0c4);
      }

      &:active {
        transform: scale(0.95);
        opacity: 0.9;
      }
    }
  }
}

@keyframes lightPulse {
  0% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
  100% { opacity: 0.5; transform: scale(1); }
}

@keyframes circlePulse {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.5; }
}

@keyframes particleFly {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(200%, -200%); opacity: 0; }
}
</style>
